<template>
  <div ref="tips" class="tips_Container" @mousemove="handeMoveFn" @mouseleave="handleLeaveFn">
    <div class="content">
      <slot></slot>
    </div>
    <Teleport to="#app">
      <div :class="{ tips: true, show: isShow, bottom: position === 'bottom' }" :style="{
        '--top': BoundingClientRect?.top + 'px',
        '--height': BoundingClientRect?.height + 'px',
        '--width': BoundingClientRect?.width + 'px',
        '--right': BoundingClientRect?.right + 'px',
        '--left': BoundingClientRect?.left + 'px',
        '--bottom': BoundingClientRect?.bottom + 'px'
      }">
        <div class="triangle">
          <div class="right"></div>
        </div>
        <div class="text">{{ title }}</div>
      </div>
    </Teleport>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
const tips = ref<HTMLDivElement>()
const BoundingClientRect = ref<DOMRect>()
defineProps({
  title: String,
  position: {
    type: String,
    defalut: 'right'
  }
})
const computedSize = () => {
  BoundingClientRect.value = tips.value?.getBoundingClientRect()
}
onMounted(() => {
  computedSize()
  window.addEventListener('resize', computedSize)
})
onUnmounted(() => {
  window.removeEventListener('resize', computedSize)
})
const isShow = ref(false)
const handeMoveFn = () => {
  isShow.value = true
}
const handleLeaveFn = () => {
  isShow.value = false
}
</script>
<style scoped lang="less">
.tips_Container {
  position: relative;
}

.show {
  display: block !important;
}

.tips {
  display: none;
  position: absolute;
  left: calc(var(--right) + 8px);
  top: calc(var(--bottom) - (var(--height) / 2));
  transform: translateY(-50%);
  z-index: 100;

  .triangle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    .right {
      width: 8px;
      height: 8px;
      background-color: var(--main-color);
      transform: rotate(45deg);
      border-radius: 1px;
    }
  }

  .text {
    white-space: nowrap;
    position: relative;
    min-width: 20px;
    min-height: 16px;
    padding: 5px;
    border-radius: 2px;
    background-color: var(--main-color);
    z-index: 1;
    color: var(---E5E5CB);
  }
}

.bottom {
  left: calc(var(--right) - (var(--height) / 2));
  top: calc(var(--bottom) + 8px);
  transform: translateX(-50%);

  .triangle {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
  }
}
</style>